<!--  index页面  -->
<script>
import IsCookiesSave from "@/toggle-table/component/IsCookiesSave.vue";
import AddListData from "@/toggle-table/component/AddListData.vue";
import Cookies from 'js-cookie'
import {isCookies, messageTip} from "@/utils";
export default {
  components: {
    IsCookiesSave,
    AddListData
  },
  data(){
    return {
      activeName: 'localstorage'
    }
  },
  mounted() {
    this.handleClick()
  },
  methods:{
    messageTip,
    /**
     * 切换组件
     * @param f 组件标识
     */
    handleClick(){
      Cookies.set('LORC', this.activeName === 'localstorage')

      if (this.activeName === 'localstorage'){
        this.$refs.localstorageRef.getList()
      }else{
        this.$refs.IsCookiesSaveRef.getList()
      }
    },
    /**
     * 打开新增框
     * @param f 组件标示
     */
    openAddData(row){
      if (row?.id) { //编辑
        this.$refs.AddListDataRef.drawer = true
        this.$refs.AddListDataRef.form = row || {}
      }else { // 新增
        this.$refs.AddListDataRef.drawer = true
        this.$refs.AddListDataRef.form = row || {}
      }

    },

    // 辅助函数-处理一下tableData初始值
    getTableData() {
      if (this.activeName === 'cookies'){
        const data = Cookies.get('TABLEDATACOOKIES');
        return data ? JSON.parse(data) : [];
      }else{
        const data = localStorage.getItem('TABLEDATALOCAL');
        return data ? JSON.parse(data) : [];
      }

    },

    // 辅助函数-设置值
    setTableData(data) {
      isCookies(this.activeName, data)
    },

    /**
     * 提交数据
     * @param val
     */
    submit(val) {
      let tableData = this.getTableData();

      if (val?.id) {
        tableData = tableData.map(i => i.id === val.id ? val : i)
      }else {
        tableData.push({...val, id: Date.now().toString()});
      }

      this.setTableData(tableData);
      this.messageTip('green',`${val?.id ? '编辑' : '新增'}${this.activeName === 'localstorage' ? 'localstorage' : 'Cookies'}`)
      this.$refs[this.activeName === 'localstorage' ? 'localstorageRef' : 'IsCookiesSaveRef'].getList()
      this.$refs.AddListDataRef.drawer = false
      this.$refs.AddListDataRef.form = {
        name: null,
        age: null,
        height: null,
        weight: null,
        movement: null
      }
    }
  }
}
</script>

<template>
  <div>
    <!--  添加一条数据-开始  -->
    <el-button
      @click="openAddData(null)"
    >
      AddNew{{activeName.replace(/^\w/, c => c.toUpperCase())}}
    </el-button>
    <!--  添加数据按钮-结束  -->

    <!--  tabs切换展示那个本地存储的列表-开始  -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="localstorage" name="localstorage">
        <IsCookiesSave ref="localstorageRef" :activeName="activeName" @editFun="openAddData"/>
      </el-tab-pane>
      <el-tab-pane label="cookies" name="cookies">
        <IsCookiesSave ref="IsCookiesSaveRef" :activeName="activeName" @editFun="openAddData"/>
      </el-tab-pane>
    </el-tabs>
    <!--  tabs切换展示那个本地存储的列表-结束  -->

    <AddListData ref="AddListDataRef" @submit="submit"/>
  </div>
</template>

<style scoped>

</style>
